<template>
  <view class="user-index">
    <view class="top-panel">
      <image class="avatar" :src="avatarUrl" mode="scaleToFill"></image>
      <view v-if="hasLogin" class="tips">
        <view class="fc">{{ userInfo.realName || userInfo.phoneNumber }}</view>

        <!-- <view class="edit" @click.stop="editAction()">
					<u-icon name="edit-pen" size="22rpx"></u-icon>
					<view style="margin-left: 6rpx;">修改</view>
				</view> -->
      </view>
      <view v-else class="tips" @click="toLogin">点击授权登录</view>
    </view>
    <view class="menu_list">
      <view class="menu_item">
        <u-cell-group :customStyle="cellGroupStyle">
          <u-cell
            v-for="(item, index) in toolList"
            :key="index"
            :url="item.url"
            isLink
            :title="item.label"
          >
            <u-icon
              color="#3c96f3"
              slot="icon"
              size="28"
              :name="item.uIcon"
            ></u-icon>
          </u-cell>
        </u-cell-group>
      </view>
    </view>
    <!-- 隐私协议 -->
    <!-- #ifdef MP-WEIXIN -->
    <!-- <privacy-popup ref="privacyComponent"></privacy-popup> -->
    <!-- #endif -->
    <!-- <bottomMenu :activityIndex="1"></bottomMenu> -->
  </view>
</template>

<script>
// import bottomMenu from '@/components/bottomMenu/index'
export default {
  components: {
    // bottomMenu
  },
  data() {
    return {
      cellGroupStyle: {
        "background-color": "#fff",
      },
      toolList: [
        {
          label: "编辑资料",
          url: "/pages/user/edit",
          uIcon: "account",
        },
        {
          label: "待客记录",
          url: "/pages/withCustom/list",
          uIcon: "question-circle",
        },
        // {
        // 	label: '应用设置',
        // 	url: '/pages/index/chooseArea?isEdit=1',
        // 	uIcon: 'setting'
        // },
        // {
        //   label: "场次交换列表",
        //   url: "/pages/classis/list",
        //   uIcon: "list-dot",
        // },
      ],
    };
  },
  computed: {
    avatarUrl() {
      return (
        this.userInfo.avatar_url ||
        require("@/static/images/default-avatar.png")
      );
    },
    hasLogin() {
      return this.$store.state.token && this.$store.state.token.length;
    },
  },
  methods: {
    toLogin() {
      uni.navigateTo({
        url: "/pages/user/login",
      });
    },
    editAction() {
      uni.navigateTo({
        url: "/pages/user/edit",
      });
    },
  },
};
</script>

<style lang="scss">
.user-index {
  height: 100vh;
  background-color: #eee;

  .top-panel {
    padding: 40rpx;
    display: flex;
    align-items: center;
    background-color: #3c96f3;
    height: 300rpx;

    .avatar {
      width: 160rpx;
      height: 160rpx;
      border-radius: 100rpx;
      overflow: hidden;
    }

    .tips {
      font-weight: bold;
      font-size: 36rpx;
      margin-left: 28rpx;
      color: #ffffff;
      height: 160rpx;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      align-content: center;

      .fc {
        width: 100%;
      }

      .edit {
        width: 94rpx;
        font-size: 20rpx;
        background-color: red;
        background-color: rgba($color: #fff, $alpha: 0.8);
        border-radius: 50rpx;
        color: #6b6b6b;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1px 0;
      }
    }
  }
}

.menu_list {
  width: 100%;
  box-sizing: border-box;
  padding: 0 20rpx;
  margin-top: -50rpx;

  .menu_item {
    background-color: #fff;
    border-radius: 20rpx;
    overflow: hidden;
  }
}
</style>
